<template>
  <div class="social-network-tab">
    <!-- 关系概览 -->
    <a-row :gutter="24" class="overview-section">
      <a-col :span="6">
        <a-statistic title="家庭成员" :value="getFamilyMembersCount()" :value-style="{ color: '#1890ff' }">
          <template #prefix>
            <HomeOutlined />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="朋友圈子" :value="getFriendsCount()" :value-style="{ color: '#52c41a' }">
          <template #prefix>
            <TeamOutlined />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="师承关系" :value="getMentorsCount()" :value-style="{ color: '#722ed1' }">
          <template #prefix>
            <BookOutlined />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="仇敌记录" :value="getEnemiesCount()" :value-style="{ color: '#f5222d' }">
          <template #prefix>
            <WarningOutlined />
          </template>
        </a-statistic>
      </a-col>
    </a-row>

    <!-- 关系网络标签页 -->
    <a-tabs v-model:activeKey="activeNetworkTab" type="card" class="network-tabs">
      <!-- 家族关系 -->
      <a-tab-pane key="family" tab="家族关系">
        <a-card title="家族关系图谱" size="small">
          <div class="family-network">
            <!-- 家族成员列表 -->
            <div class="family-members">
              <h4>家族成员</h4>
              <a-row :gutter="[16, 16]">
                <!-- 父母 -->
                <a-col :span="24">
                  <h5>父母</h5>
                  <div class="members-grid">
                    <div v-for="parent in getFamilyParents()" :key="parent.name" class="member-card">
                      <a-card size="small">
                        <div class="member-info">
                          <a-avatar size="small">{{ parent.name.charAt(0) }}</a-avatar>
                          <div class="info">
                            <span class="name">{{ parent.name }}</span>
                            <a-tag size="small">{{ parent.relation }}</a-tag>
                            <a-tag :color="parent.status === 'alive' ? 'green' : 'gray'" size="small">
                              {{ parent.status === 'alive' ? '在世' : '已故' }}
                            </a-tag>
                          </div>
                          <div class="actions">
                            <a-button type="link" size="small" @click="editFamilyMember(parent)">
                              <EditOutlined />
                            </a-button>
                          </div>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </a-col>

                <!-- 配偶 -->
                <a-col :span="24" v-if="getFamilySpouse()">
                  <h5>配偶</h5>
                  <div class="members-grid">
                    <div class="member-card">
                      <a-card size="small">
                        <div class="member-info">
                          <a-avatar size="small">{{ getFamilySpouse().name.charAt(0) }}</a-avatar>
                          <div class="info">
                            <span class="name">{{ getFamilySpouse().name }}</span>
                            <a-tag size="small" color="pink">配偶</a-tag>
                            <a-tag :color="getFamilySpouse().status === 'alive' ? 'green' : 'gray'" size="small">
                              {{ getFamilySpouse().status === 'alive' ? '在世' : '已故' }}
                            </a-tag>
                          </div>
                          <div class="actions">
                            <a-button type="link" size="small" @click="editFamilyMember(getFamilySpouse())">
                              <EditOutlined />
                            </a-button>
                          </div>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </a-col>

                <!-- 子女 -->
                <a-col :span="24" v-if="getFamilyChildren().length > 0">
                  <h5>子女</h5>
                  <div class="members-grid">
                    <div v-for="child in getFamilyChildren()" :key="child.name" class="member-card">
                      <a-card size="small">
                        <div class="member-info">
                          <a-avatar size="small">{{ child.name.charAt(0) }}</a-avatar>
                          <div class="info">
                            <span class="name">{{ child.name }}</span>
                            <a-tag size="small" color="blue">{{ child.relation }}</a-tag>
                            <a-tag color="green" size="small">在世</a-tag>
                          </div>
                          <div class="actions">
                            <a-button type="link" size="small" @click="editFamilyMember(child)">
                              <EditOutlined />
                            </a-button>
                          </div>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </a-col>

                <!-- 兄弟姐妹 -->
                <a-col :span="24" v-if="getFamilySiblings().length > 0">
                  <h5>兄弟姐妹</h5>
                  <div class="members-grid">
                    <div v-for="sibling in getFamilySiblings()" :key="sibling.name" class="member-card">
                      <a-card size="small">
                        <div class="member-info">
                          <a-avatar size="small">{{ sibling.name.charAt(0) }}</a-avatar>
                          <div class="info">
                            <span class="name">{{ sibling.name }}</span>
                            <a-tag size="small" color="cyan">{{ sibling.relation }}</a-tag>
                            <a-tag :color="sibling.status === 'alive' ? 'green' : 'gray'" size="small">
                              {{ sibling.status === 'alive' ? '在世' : '已故' }}
                            </a-tag>
                          </div>
                          <div class="actions">
                            <a-button type="link" size="small" @click="editFamilyMember(sibling)">
                              <EditOutlined />
                            </a-button>
                          </div>
                        </div>
                      </a-card>
                    </div>
                  </div>
                </a-col>
              </a-row>

              <a-button type="dashed" block @click="showAddFamilyModal = true" class="add-member-btn">
                <PlusOutlined />
                添加家族成员
              </a-button>
            </div>
          </div>
        </a-card>
      </a-tab-pane>

      <!-- 朋友圈子 -->
      <a-tab-pane key="friends" tab="朋友圈子">
        <a-card title="社交网络" size="small">
          <div class="friends-network">
            <a-row :gutter="[16, 16]">
              <a-col v-for="friend in getFriends()" :key="friend.name" :xs="24" :sm="12" :md="8">
                <a-card size="small" class="friend-card">
                  <div class="friend-info">
                    <a-avatar>{{ friend.name.charAt(0) }}</a-avatar>
                    <div class="info">
                      <h4>{{ friend.name }}</h4>
                      <a-tag :color="getFriendTypeColor(friend.type)">{{ friend.type }}</a-tag>
                      <div class="intimacy">
                        <span>亲密度：</span>
                        <a-progress :percent="friend.intimacy" size="small" :stroke-color="getIntimacyColor(friend.intimacy)" />
                      </div>
                    </div>
                    <div class="actions">
                      <a-button type="link" size="small" @click="editFriend(friend)">
                        <EditOutlined />
                      </a-button>
                      <a-button type="link" size="small" danger @click="deleteFriend(friend)">
                        <DeleteOutlined />
                      </a-button>
                    </div>
                  </div>
                </a-card>
              </a-col>

              <a-col :xs="24" :sm="12" :md="8">
                <a-card size="small" class="add-friend-card">
                  <a-button type="dashed" block @click="showAddFriendModal = true">
                    <PlusOutlined />
                    添加朋友
                  </a-button>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-tab-pane>

      <!-- 师承关系 -->
      <a-tab-pane key="mentors" tab="师承关系">
        <a-card title="师承网络" size="small">
          <div class="mentors-network">
            <!-- 师父 -->
            <div v-if="getMentors().length > 0" class="mentors-section">
              <h4>师父</h4>
              <a-row :gutter="[16, 16]">
                <a-col v-for="mentor in getMentors()" :key="mentor.name" :xs="24" :sm="12">
                  <a-card size="small" class="mentor-card">
                    <div class="mentor-info">
                      <a-avatar size="large">{{ mentor.name.charAt(0) }}</a-avatar>
                      <div class="info">
                        <h4>{{ mentor.name }}</h4>
                        <p><strong>关系：</strong>{{ mentor.relation }}</p>
                        <p><strong>领域：</strong>{{ mentor.field }}</p>
                        <a-tag color="purple">师父</a-tag>
                      </div>
                      <div class="actions">
                        <a-button type="link" size="small" @click="editMentor(mentor)">
                          <EditOutlined />
                        </a-button>
                        <a-button type="link" size="small" danger @click="deleteMentor(mentor)">
                          <DeleteOutlined />
                        </a-button>
                      </div>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
            </div>

            <!-- 徒弟（假设数据） -->
            <div class="disciples-section">
              <h4>徒弟</h4>
              <a-empty description="暂无徒弟记录" />
            </div>

            <a-button type="dashed" block @click="showAddMentorModal = true" class="add-mentor-btn">
              <PlusOutlined />
              添加师承关系
            </a-button>
          </div>
        </a-card>
      </a-tab-pane>

      <!-- 仇敌关系 -->
      <a-tab-pane key="enemies" tab="仇敌关系">
        <a-card title="仇敌记录" size="small">
          <div class="enemies-network">
            <a-alert message="仇敌关系记录" description="此处记录与本人有仇怨的个人或组织，仅供地府内部参考。" type="warning" show-icon class="warning-alert" />

            <a-table :columns="enemyColumns" :data-source="getEnemies()" :pagination="false" size="small" class="enemies-table">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'severity'">
                  <a-tag :color="getSeverityColor(record.severity)">
                    {{ getSeverityText(record.severity) }}
                  </a-tag>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <a-space>
                    <a-button type="link" size="small" @click="editEnemy(record)">
                      <EditOutlined />
                      编辑
                    </a-button>
                    <a-button type="link" size="small" danger @click="deleteEnemy(record)">
                      <DeleteOutlined />
                      删除
                    </a-button>
                  </a-space>
                </template>
              </template>
            </a-table>

            <a-button type="dashed" block @click="showAddEnemyModal = true" class="add-enemy-btn">
              <PlusOutlined />
              添加仇敌记录
            </a-button>
          </div>
        </a-card>
      </a-tab-pane>

      <!-- 社交圈子 -->
      <a-tab-pane key="circles" tab="社交圈子">
        <a-card title="社交组织" size="small">
          <div class="social-circles">
            <a-row :gutter="[16, 16]">
              <a-col v-for="circle in getSocialCircles()" :key="circle.name" :xs="24" :sm="12" :md="8">
                <a-card size="small" class="circle-card">
                  <div class="circle-info">
                    <div class="circle-header">
                      <TeamOutlined class="circle-icon" />
                      <h4>{{ circle.name }}</h4>
                    </div>
                    <div class="circle-details">
                      <p><strong>角色：</strong>{{ circle.role }}</p>
                      <p><strong>加入时间：</strong>{{ circle.joinDate }}</p>
                    </div>
                    <div class="actions">
                      <a-button type="link" size="small" @click="editCircle(circle)">
                        <EditOutlined />
                      </a-button>
                      <a-button type="link" size="small" danger @click="leaveCircle(circle)">
                        <ExportOutlined />
                        退出
                      </a-button>
                    </div>
                  </div>
                </a-card>
              </a-col>

              <a-col :xs="24" :sm="12" :md="8">
                <a-card size="small" class="add-circle-card">
                  <a-button type="dashed" block @click="showAddCircleModal = true">
                    <PlusOutlined />
                    加入新圈子
                  </a-button>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>

    <!-- 各种弹窗 -->
    <!-- 添加家族成员弹窗 -->
    <a-modal v-model:open="showAddFamilyModal" title="添加家族成员" @ok="handleAddFamilyMember" @cancel="resetFamilyForm">
      <a-form ref="familyFormRef" :model="familyForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="姓名" name="name">
              <a-input v-model:value="familyForm.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="关系" name="relation">
              <a-select v-model:value="familyForm.relation">
                <a-select-option value="父亲">父亲</a-select-option>
                <a-select-option value="母亲">母亲</a-select-option>
                <a-select-option value="配偶">配偶</a-select-option>
                <a-select-option value="子女">子女</a-select-option>
                <a-select-option value="兄弟">兄弟</a-select-option>
                <a-select-option value="姐妹">姐妹</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="familyForm.status">
            <a-radio value="alive">在世</a-radio>
            <a-radio value="dead">已故</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 其他弹窗（朋友、师父、仇敌、圈子）类似实现 -->
    <!-- 为了节省空间，这里省略其他弹窗的具体实现 -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { HomeOutlined, TeamOutlined, BookOutlined, WarningOutlined, EditOutlined, DeleteOutlined, PlusOutlined, ExportOutlined } from '@ant-design/icons-vue'

// 组件属性
const props = defineProps({
  archive: {
    type: Object,
    required: true
  }
})

// 组件事件
const emit = defineEmits(['update'])

// 响应式数据
const activeNetworkTab = ref('family')
const showAddFamilyModal = ref(false)
const showAddFriendModal = ref(false)
const showAddMentorModal = ref(false)
const showAddEnemyModal = ref(false)
const showAddCircleModal = ref(false)

const familyFormRef = ref()
const familyForm = reactive({
  name: '',
  relation: '',
  status: 'alive'
})

// 仇敌表格列
const enemyColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '仇怨原因', dataIndex: 'reason', key: 'reason' },
  { title: '严重程度', key: 'severity' },
  { title: '操作', key: 'actions' }
]

// 计算属性和方法
const getFamilyMembersCount = () => {
  const family = props.archive.socialNetwork?.family || {}
  const parents = family.parents?.length || 0
  const spouse = family.spouse ? 1 : 0
  const children = family.children?.length || 0
  const siblings = family.siblings?.length || 0
  return parents + spouse + children + siblings
}

const getFriendsCount = () => {
  return props.archive.socialNetwork?.friends?.length || 0
}

const getMentorsCount = () => {
  return props.archive.socialNetwork?.mentors?.length || 0
}

const getEnemiesCount = () => {
  return props.archive.socialNetwork?.enemies?.length || 0
}

const getFamilyParents = () => {
  return props.archive.socialNetwork?.family?.parents || []
}

const getFamilySpouse = () => {
  return props.archive.socialNetwork?.family?.spouse || null
}

const getFamilyChildren = () => {
  return props.archive.socialNetwork?.family?.children || []
}

const getFamilySiblings = () => {
  return props.archive.socialNetwork?.family?.siblings || []
}

const getFriends = () => {
  return props.archive.socialNetwork?.friends || []
}

const getMentors = () => {
  return props.archive.socialNetwork?.mentors || []
}

const getEnemies = () => {
  return props.archive.socialNetwork?.enemies || []
}

const getSocialCircles = () => {
  return props.archive.socialNetwork?.socialCircles || []
}

const getFriendTypeColor = (type) => {
  const colors = {
    挚友: 'red',
    知己: 'blue',
    朋友: 'green',
    同事: 'orange',
    邻居: 'purple'
  }
  return colors[type] || 'default'
}

const getIntimacyColor = (intimacy) => {
  if (intimacy >= 80) return '#f5222d'
  if (intimacy >= 60) return '#fa541c'
  if (intimacy >= 40) return '#faad14'
  return '#52c41a'
}

const getSeverityColor = (severity) => {
  const colors = {
    low: 'green',
    medium: 'orange',
    high: 'red',
    critical: 'red'
  }
  return colors[severity] || 'default'
}

const getSeverityText = (severity) => {
  const texts = {
    low: '轻微',
    medium: '一般',
    high: '严重',
    critical: '极其严重'
  }
  return texts[severity] || '未知'
}

// 编辑方法
const editFamilyMember = (member) => {
  message.info('编辑家族成员功能开发中')
}

const editFriend = (friend) => {
  message.info('编辑朋友信息功能开发中')
}

const editMentor = (mentor) => {
  message.info('编辑师承关系功能开发中')
}

const editEnemy = (enemy) => {
  message.info('编辑仇敌记录功能开发中')
}

const editCircle = (circle) => {
  message.info('编辑圈子信息功能开发中')
}

// 删除方法
const deleteFriend = (friend) => {
  message.success('朋友关系已删除')
}

const deleteMentor = (mentor) => {
  message.success('师承关系已删除')
}

const deleteEnemy = (enemy) => {
  message.success('仇敌记录已删除')
}

const leaveCircle = (circle) => {
  message.success('已退出圈子')
}

// 添加方法
const handleAddFamilyMember = () => {
  message.success('家族成员添加成功')
  showAddFamilyModal.value = false
  resetFamilyForm()
}

const resetFamilyForm = () => {
  Object.assign(familyForm, {
    name: '',
    relation: '',
    status: 'alive'
  })
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.social-network-tab {
  // 重写 Ant Design 组件样式以适应深色主题
  :deep(.ant-card) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(10px);

    .ant-card-head {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: $text-primary;
        font-weight: 600;
      }
    }

    .ant-card-body {
      background: transparent;
      color: $text-primary;
    }
  }

  // Tabs 样式
  :deep(.ant-tabs) {
    .ant-tabs-nav {
      .ant-tabs-tab {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: $text-secondary;

        &.ant-tabs-tab-active {
          background: $primary-color;
          border-color: $primary-color;
          color: white;
        }

        &:hover:not(.ant-tabs-tab-active) {
          color: $primary-color;
          border-color: $primary-color;
        }
      }
    }

    .ant-tabs-content {
      background: transparent;
      color: $text-primary;
    }
  }

  // Table 样式
  :deep(.ant-table) {
    background: transparent;

    .ant-table-thead > tr > th {
      background: rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      color: $text-primary;
    }

    .ant-table-tbody > tr > td {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: $text-primary;
    }

    .ant-table-tbody > tr:hover > td {
      background: rgba(114, 46, 209, 0.05);
    }
  }

  // 表单样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: $text-primary;
      }
    }

    .ant-modal-body {
      background: transparent;
    }
  }

  :deep(.ant-form) {
    .ant-form-item-label > label {
      color: $text-primary;
    }

    .ant-input,
    .ant-input-number,
    .ant-select-selector,
    .ant-textarea,
    .ant-slider {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: $text-primary;

      &:hover {
        border-color: $primary-color;
      }

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
      }
    }

    .ant-btn {
      &.ant-btn-primary {
        background: $primary-color;
        border-color: $primary-color;

        &:hover {
          background: $primary-color-light;
          border-color: $primary-color-light;
        }
      }

      &.ant-btn-dashed {
        background: rgba(255, 255, 255, 0.05);
        border: 1px dashed rgba(255, 255, 255, 0.3);
        color: $text-secondary;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          border-color: $primary-color;
          color: $primary-color;
        }
      }

      &:not(.ant-btn-primary):not(.ant-btn-dashed) {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: $text-primary;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          border-color: $primary-color;
          color: $primary-color;
        }
      }
    }
  }

  // Progress 样式
  :deep(.ant-progress) {
    .ant-progress-bg {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  // Statistic 样式
  :deep(.ant-statistic) {
    .ant-statistic-title {
      color: $text-secondary;
    }

    .ant-statistic-content {
      color: $text-primary;
    }
  }

  // Alert 样式
  :deep(.ant-alert) {
    background: rgba(245, 34, 45, 0.15);
    border: 1px solid rgba(245, 34, 45, 0.3);
    color: #ff7875;

    .ant-alert-message {
      color: #ff7875;
    }

    .ant-alert-description {
      color: rgba(255, 120, 117, 0.8);
    }
  }

  .overview-section {
    margin-bottom: $spacing-xl;
  }

  .network-tabs {
    .family-network {
      .family-members {
        h4,
        h5 {
          color: $primary-color;
          margin-bottom: $spacing-md;
        }

        .members-grid {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-md;
          margin-bottom: $spacing-lg;

          .member-card {
            flex: 1;
            min-width: 200px;

            .member-info {
              display: flex;
              align-items: center;
              gap: $spacing-sm;

              .info {
                flex: 1;

                .name {
                  font-weight: 500;
                  display: block;
                  margin-bottom: $spacing-xs;
                  color: $text-primary;
                }
              }
            }
          }
        }

        .add-member-btn {
          margin-top: $spacing-lg;
        }
      }
    }

    .friends-network {
      .friend-card {
        height: 100%;

        .friend-info {
          display: flex;
          flex-direction: column;
          gap: $spacing-sm;

          .info {
            h4 {
              margin: 0 0 $spacing-xs 0;
              color: $primary-color;
            }

            .intimacy {
              margin-top: $spacing-sm;

              span {
                font-size: 12px;
                margin-bottom: $spacing-xs;
                display: block;
                color: $text-secondary;
              }
            }
          }

          .actions {
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .add-friend-card {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .mentors-network {
      .mentors-section {
        margin-bottom: $spacing-xl;

        h4 {
          color: $primary-color;
          margin-bottom: $spacing-md;
        }

        .mentor-card {
          .mentor-info {
            display: flex;
            gap: $spacing-md;

            .info {
              flex: 1;

              h4 {
                margin: 0 0 $spacing-sm 0;
                color: $primary-color;
              }

              p {
                margin: $spacing-xs 0;
                font-size: 14px;
                color: $text-secondary;
              }
            }
          }
        }
      }

      .disciples-section {
        h4 {
          color: $primary-color;
          margin-bottom: $spacing-md;
        }
      }

      .add-mentor-btn {
        margin-top: $spacing-lg;
      }
    }

    .enemies-network {
      .warning-alert {
        margin-bottom: $spacing-lg;
      }

      .enemies-table {
        margin-bottom: $spacing-lg;
      }

      .add-enemy-btn {
        margin-top: $spacing-lg;
      }
    }

    .social-circles {
      .circle-card {
        height: 100%;

        .circle-info {
          .circle-header {
            display: flex;
            align-items: center;
            gap: $spacing-sm;
            margin-bottom: $spacing-md;

            .circle-icon {
              font-size: 20px;
              color: $primary-color;
            }

            h4 {
              margin: 0;
              color: $primary-color;
            }
          }

          .circle-details {
            p {
              margin: $spacing-xs 0;
              font-size: 14px;
              color: $text-secondary;
            }
          }

          .actions {
            margin-top: $spacing-md;
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .add-circle-card {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 响应式样式
@media (max-width: 768px) {
  .social-network-tab {
    .overview-section {
      .ant-col {
        margin-bottom: $spacing-md;
      }
    }

    .members-grid {
      .member-card {
        min-width: 100% !important;
      }
    }
  }
}
</style>
